<template>
  <div class="member">
    <!-- 版心 -->
    <div class="Library_wrap">
      <!-- 头部 -->
      <div class="header">
        <div class="header_top">
          <el-button size="medium" @click.stop="newBuilt">新增会员</el-button>
        </div>
        <div class="header_bottom">
          <div class="header_left">
            <div class="header_name">
              场馆选择：
             <el-select v-model="value9" @change="gid" style="width:50%" placeholder="请选择">
                <el-option
                  v-for="item in options9"
                  :key="item.value"
                  :label="item.label"
                  :value="item.gym_name">
                </el-option>
              </el-select>
            </div>

            <div class="header_number">
              会员总数：
              <span>{{shju[2]}}</span>
            </div>

            <!-- <div class="header_number">
              成交总数：
              <span>{{shju[0]}}</span>
            </div>

            <div class="header_number">
              收益总额：
              <span>{{shju[1]}}</span>
            </div> -->
          </div>

          <div class="header_right">
            <div class="header_ipt">
              <span class="el-icon-search"></span>
              
              <input type="text" v-model="cxs" placeholder="输入会员姓名或手机号">
              
              <button @click="cx()">查询</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 头部结束 -->
      <!-- 表格 -->
      <el-table    v-loading="loading" :data="tableData" :row-class-name="tableRowClassName">
        <el-table-column type="index" label="序号" width="120" :index="indexMethod"></el-table-column>

        <el-table-column prop="username" label="会员姓名" width="180"></el-table-column>

        <el-table-column prop="phone" label="手机号"></el-table-column>

        <el-table-column prop="count" label="预约次数"></el-table-column>

        <el-table-column prop="create_time"  :formatter="dateFormat" label="注册日期"></el-table-column>
        <el-table-column  prop="end_time"  :formatter="dateFormat" label="失效日期"></el-table-column>

        <el-table-column prop="valid" :formatter="dateFormats" label="身份"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              style="color:#fff;background:#2f7dfe;"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>

            <el-button
              size="mini"
              type="danger"
              style="background:#a93b3b;"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
     <div style="position: absolute;right: 17%">
        <el-pagination
       @current-change='yemian'
       :current-page='yeshu'
        layout="prev, pager, next"
        :total="shju[2]">
      </el-pagination>
     </div>
    </div>
    
      <div class="newBuilt" v-show="addActive">
            <div class="add_owner">
                <div class="add_top">
                    <p>{{wz}}会员</p>
                   <span class="el-icon-circle-close" @click.stop="hide"></span>
                </div>
                <div class="add_bottom">
                    <ul>
                        <li>
                            <span>会员姓名：</span>
                            <el-input v-model="xm" placeholder="请输入姓名"></el-input>
                        </li>
                         <li>
                            <span>手机号：</span>
                            <el-input v-model="sjh" placeholder="请输入手机号"></el-input>
                        </li>
                        <li>
                            <span>身份：</span>
                           <el-select v-model="sf"  @change="xzsf()" placeholder="请选择">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                        </li>
                         <li v-if="seen">
                            <span>失效日期：</span>
                           <el-date-picker
                            v-model="zcsj"
                            type="date"
                            placeholder="选择日期">
                          </el-date-picker>
                        </li>
                           <!-- <li>
                            <span>失效日期：</span>
                            <el-input v-model="sxsj" placeholder=""></el-input>
                        </li> -->
                         <!-- <li>
                            <span>场馆地址：</span>
                            <el-input v-model="cgdz" placeholder="请输入场馆地址"></el-input>
                        </li> -->
                         
                    </ul>
                </div>
                <div class="add_submit" @click="tj()">确认{{wz}}</div>
            </div>
        </div>
        <!-- 新增会员结束-->
  </div>
</template> 
  

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<script>
import moment from 'moment'    
export default {
  data() {
    return {
      tableData: [
        {
          username: "魏术超",

          phone: "15135934855",

          count: "3",

          create_time: "2018-09-10",

          end_time: "2018-07-10",

          valid: "VIP"
        },
       
      ],
      yeshu:1,
      loading:true,
      options9:'',
      value9:'',
      gymId:'',
      gymIds:'',
      xzsfstate:'',
      seen:false,
      sjh:'',
      xm:'1111',
      zcsj:'',
      sf:'',
      options: [
        {
          value: "会员",
        },
        {
          value: "非会员",
        }
      ],
      gymId:'',
      value: "",
      input: "",
      shju:'',
      addActive:false,
      cxs:'',
      value1: "",
      state:'',
      wz:'',
      optionsDemo:''
    };
  },
  created(){

   this.ajax()
  },
  
  methods: {
    yemian(yeshu){
        this.ajax('',yeshu)
    },  
    cx(){
      var mhcx=this.cxs
      this.ajax(mhcx)
    },
    xzsf(){
      console.log(this.sf)
      if(this.sf == '会员'){
        this.seen=true
        this.xzsfstate=1
      }else{
        this.seen=false
        this.xzsfstate=2
      }
    },
     gid(){
          var arr=this.options9
          this.optionsDemo=this.value9
          console.log(this.optionsDemo)
          console.log(this.value9)
          for (var i=0;i<arr.length;i++){
            if(this.value9 == arr[i].gym_name){
               this.gymId=arr[i].id
            }
          }
          this.ajax()
    },
      dateFormat:function(row, column) {
               var date = row[column.property];
          if (date == undefined) {
             return "";
          }else if(date < 0){
             return "过期";
          }
          return moment(date).format("YYYY-MM-DD")
        },
         dateFormats:function(row, column) {
               var date = row[column.property];
          if (date == undefined) {
             return "";
          }else if(date < 0){
             return "普通";
          }
          return 'vip'
        },
       ajax(mhcx,yeshu){
       let obj = {
        }
        let _this = this;
        let qs = require("qs");
         this.$axios.post("yujiaextend/gymadmin/findAllGymBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
          if( _this.gymId == ''){
              _this.gymId=response.data.data[0].id
          }
          _this.value9=JSON.stringify(response.data.data[0].gym_name).replace(/"/g, " ")
          // console.log(_this.optionsDemo == '')
          if(_this.optionsDemo != ''){
             _this.value9=_this.optionsDemo
          }
          _this.options9=response.data.data
          var obj={
            gymId:_this.gymId,
            name:mhcx,
            page:yeshu
          }
          let qs = require("qs");
          _this.$axios.post("/yujiaextend/gymadmin/findAllYogaGymSuccessPeopleByAdmin", qs.stringify(obj), {
              headers: {
              "Content-Type": "application/x-www-form-urlencoded"
              }
          })
          .then((response) =>{
              _this.loading=false
              _this.shju=response.data.data
              _this.tableData=response.data.data[3]
              console.log(response.data.data)
                if(response.data.data[3]== ''){
                _this.$message({
                    message: '暂无该馆',
                    type: 'warning'
                  });     
           }
          })
          .catch(function(error) {
              console.log(error);
          });
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    tj(){
      var sj
      console.log(this.zcsj)
      if(this.zcsj == null || this.zcsj == undefined  || this.zcsj == ''){
          sj=1
      }else{
          var date = new Date(this.zcsj)
          sj=date.getTime()
      }
    
      var obj={
        username:this.xm,
        phone:this.sjh,
        isVip:this.xzsfstate,
        gymId:this.gymId,
        endTime:sj
      }
        let qs = require("qs");
          let _this = this;
      _this.$axios.post("/yujiaextend/gymadmin/addVipUserBySuperAdmin", qs.stringify(obj), {
              headers: {
              "Content-Type": "application/x-www-form-urlencoded"
              }
          })
          .then((response) =>{
                if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message:_this.wz+'成功!'
                });
                _this.xm=''
                _this.sjh=''
                _this.xzsfstate=''
                _this.zcsj=''
                _this.ajax()
                _this.addActive = false;
            }else{
                 _this.$message({
                    type: 'error',
                    message: _this.wz+'失败!'
                });
            }
          })
          .catch(function(error) {
              console.log(error);
          });
    },
    indexMethod(index) {
      return index * 1+1;
    },

    handleEdit(index, row) {
      console.log(row)
      this.wz='修改'
      this.addActive = true;
      var obj={
       userId:row.user_id
      }
      let qs = require("qs");
      let _this = this;
      _this.$axios.post("/yujiaextend/gymadmin/findSuccessUserInfoByAdmin", qs.stringify(obj), {
              headers: {
              "Content-Type": "application/x-www-form-urlencoded"
              }
          })
          .then((response) =>{
              _this.xm=response.data.data.username
              _this.sjh=response.data.data.phone
              var state=response.data.data.valid
              console.log(state)
             if(state == 1){
                _this.seen=true
                _this.xzsfstate=1
                _this.sf='会员'
                _this.zcsj=response.data.data.end_time
              }
              else{
                _this.seen=false
                _this.xzsfstate=2
                _this.sf='非会员'
              }
          })
          .catch(function(error) {
              console.log(error);
          });
    },

    handleDelete(index, row) {
      // console.log(index, row);
       this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             let obj = {
             userId:row.user_id
        }
        let _this = this;
        let qs = require("qs");
        this.$axios.post("/yujiaextend/gymadmin/setUserVipValidIsOffBySuperAdmin", qs.stringify(obj), {
            headers: {
            "Content-Type": "application/x-www-form-urlencoded"
            }
        })
        .then(function(response) {
           if(response.data.code == 1){
                 _this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                _this.ajax()
            }else{
                 _this.$message({
                    type: 'error',
                    message: '删除失败!'
                });
            }
        })
        .catch((error)=> {
            console.log(error);
        });
       
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    tableRowClassName({
      row,

      rowIndex
    }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }

      return "";
    },

    newBuilt() {
      this.wz='新增'
      this.addActive = true;
    },

    hide() {
      let _this = this;
      _this.addActive = false;
      _this.xm=''
      _this.sjh=''
      _this.xzsfstate=''
      _this.zcsj=''
      _this.sf=''
    }
  }
};
</script>
<style scoped>
.member {
  width: 100%;

  height: 100%;

  background: #f2f2f2;

  position: absolute;

  left: 250px;

  top: 0;

  z-index: 2;
}

/* 版心 */

.Library_wrap {
  width: 100%;

  height: 100%;

  margin-left: 3%;
}

.Library_wrap .header {
  width: 100%;

  margin-top: 35px;
}

.Library_wrap .header .header_top .el-button--medium:first-child {
  width: 90px;

  height: 34px;

  background: #2871e9;
}

.Library_wrap .header .header_top .el-button--medium:nth-child(2) {
  background: #0947ae;
}

.el-button {
  color: #fff;
}

.Library_wrap .header .header_bottom {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 30px;

  padding-bottom: 20px;

  border-bottom: 1px solid #cdcdcd;
}

.Library_wrap .header .header_bottom .header_left {
  font-size: 16px;

  color: #000000;

  display: flex;

  align-items: center;
}

.el-date-editor {
  width: 100%;
}

.el-date-editor {
  line-height: 35px;
}

.el-select {
  width: 100%;
}

.Library_wrap .header .header_bottom .header_name {
  font-size: 15px;

  color: #000000;
}

.Library_wrap .header .header_bottom .header_name span {
  color: #286fe6;
}

.Library_wrap .header .header_bottom .header_number {
  font-size: 15px;

  color: #000000;

  margin-left: 26px;
}

.Library_wrap .header .header_bottom .header_number span {
  color: #286fe6;
}

.Library_wrap .header .header_bottom .header_right {
  display: flex;

  align-items: center;

  padding-right: 20%;
}

.Library_wrap .header .header_bottom .header_right .header_ipt {
  height: 30px;

  background: #dfdfdf;

  border-radius: 15px;

  display: flex;

  align-items: center;

  margin-left: 27px !important;
}

.Library_wrap .header .header_bottom .header_right .header_ipt span {
  display: inline-block;

  color: #b9b9b9;

  margin-left: 10px;
}

.Library_wrap .header .header_bottom .header_right .header_ipt input {
  border: none;
height:30px;
  outline: none;

  background: #dfdfdf;

  margin-left: 5px;
}

.Library_wrap .header .header_bottom .header_right .header_ipt button {
  width: 55px;

  height: 26px;
line-height:26px;
     padding: 0 10px;
  border: none;

  border-radius: 15px;

  background: #2e7bfb;

  font-size: 14px;

  color: #ffffff;
}

/* 版心结束 */

/* 表格 */

.el-table {
  width: 80%;

  margin-top: 20px;
}

.el-table tr th {
  text-align: center !important;
}

/* 表格结束 */

/* 添加馆主*/

.newBuilt {
  width: 100%;

  height: 100%;

  position: absolute;

  left: -250px;

  top: 0;

  z-index: 5;

  background: rgba(0, 0, 0, 0.4);
}

.newBuilt .add_owner {
  width: 560px;

  background: #fff;

  margin: 146px auto;

  border-radius: 6px;

  box-shadow: 0px 1px 12px 0px rgba(41, 47, 61, 0.1);

  padding: 0 40px;

  padding-bottom: 40px;
}

.newBuilt .add_owner .add_top {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 40px;
}

.newBuilt .add_owner .add_top p {
  font-size: 20px;

  padding-bottom: 5px;

  border-bottom: 3px solid #286fe6;

  color: #000;

  font-weight: bold;
}

.newBuilt .add_owner .add_top span {
  font-size: 18px;

  display: inline-block;
}

.newBuilt .add_owner .add_bottom {
  width: 100%;
}

.newBuilt .add_owner .add_bottom ul {
  width: 100%;
}

.newBuilt .add_owner .add_bottom ul li {
  width: 94%;

  display: flex;

  align-items: center;

  margin-top: 35px;
}

.newBuilt .add_owner .add_bottom ul li span {
  display: inline-block;

  width: 25%;

  font-size: 16px;

  color: #000000;
}

.newBuilt .add_owner .add_submit {
  width: 52%;

  height: 40px;

  line-height: 40px;

  margin: 0 auto;

  text-align: center;

  background: #2f7dfe;

  border-radius: 4px;

  margin-top: 80px;

  font-size: 16px;

  color: #fff;
}

/* 添加馆主结束 */
</style>

